import axios from "@/utils/request";
import Vue from "vue";
import { VueEditor } from "vue2-editor";
Vue.component("VueEditor", VueEditor);
// 引入后还需要在vue.config.js配置
import { Quill } from "vue2-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

const editorToolbar = [
	["bold", "italic", "underline", "strike"], // toggled buttons
	[{ align: ["", "center", "right", "justify"] }],
	[{ header: [false, 1, 2, 3, 4, 5, 6] }],
	["blockquote"],
	[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
	[{ script: "sub" }, { script: "super" }], // superscript/subscript
	[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
	[{ color: [] }, { background: [] }], // dropdown with defaults from theme
	["link", "image"],
	["clean"],
];
const editorOptions = {
	modules: {
		imageDrop: true, // 图片拖入,突变转为base64
		imageResize: {
			// 图片缩放
			displayStyles: {},
			modules: ["Resize", "DisplaySize", "Toolbar"],
		},
	},
};
export default (_self, h) => {
	return h("vue-editor", {
		props: {
			value: _self.obj.value,
			useCustomImageHandler: true, // false上传图片是base64,true需要接口，回显url
			editorToolbar,
			editorOptions,
		},
		attrs: {
			disabled: !_self.obj.status,
			id: _self.obj.elementName + new Date().getTime(),
			placeholder: _self.obj.placeholder || "这是一个输入框",
		},
		on: {
			input(e) {
				_self.obj.value = e;
			},
			"image-added"(file, Editor, cursorLocation, resetUploader) {
				let formData = new FormData();
				formData.append("file", file);

				axios({
					url: "/test/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
					method: "POST",
					data: formData,
				})
					.then(result => {
						const url = result.data.data.path; // Get url from response
						Editor.insertEmbed(cursorLocation, "image", url);
						resetUploader();
					})
					.catch(err => {
						console.log(err);
					});
			},
		},
	});
};
export const vueEditorConf = {
	status: true, // 启用状态，true启用；0停用
	elementWidth: "100%",
	elementType: "vueEditor", // 对应数据库内类型
	elementName: "编辑器", // 控件左侧label内容
	placeholder: "",
	value: "", // 绑定的值
	icon: "el-icon-edit-outline",
	required: false, // 是否必填
	rules: [],
};
